<template>
  <div class="payDetail">
    <ul>
      <li>
        <div>缴费年度</div>
        <div>{{ year }}年</div>
      </li>
      <li>
        <div>缴费月度</div>
        <div>{{ month }}月</div>
      </li>
      <li>
        <div>缴费基数</div>
        <div>{{ base }}</div>
      </li>
      <li>
        <div>养老金增加额</div>
        <div>{{ addCost }}</div>
      </li>
      <li>
        <div>缴费比例</div>
        <div>{{ percent }}%</div>
      </li>
      <li>
        <div>缴费金额</div>
        <div>{{ cost }}元</div>
      </li>
    </ul>
  </div>
</template>

<script>
import {querydata4object} from '../assets/js/api';
export default {
  data() {
    return {
      year: '',
      month: '',
      base: '',
      addCost: '',
      percent: '',
      cost: ''
    };
  },
  mounted() {
    let id = this.$route.query.id;
    querydata4object({
      jbxxId: id
    }).then(res => {
      console.log(res);
      if (res.code.status === '1') {
        let data = res.data;
        this.year = data.year;
        this.month = data.month;
        this.base = data.jfjs;
        this.addCost = data.yljzje;
        this.percent = data.jfbl;
        this.cost = data.jfje;
      } else {
        this.$toast('获取数据失败');
      }
    });
  }
};
</script>

<style lang="less" scoped>
.payDetail {
  padding: 0 18px;
  overflow: hidden;
  ul {
    background: #ffffff;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    width: 704px;
    margin: 0 auto;
    margin-top: 20px;
    box-sizing: border-box;
    height: 100%;
    padding: 0 18px;
    li {
      display: grid;
      grid-template-columns: 300px 1fr;
      grid-column-gap: 20px;
      height: 110px;
      line-height: 110px;
      color: #353535;
      font-size: 34px;
      &:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
      }
      > div:first-child {
        padding-left: 22px;
        text-align: left;
        color: #888888;
      }
      > div:last-child {
        padding-right: 22px;
        text-align: left;
      }
    }
  }
}
</style>
